@import '~@/styles/theme.less';

.browser-page{
  background: #EFEFEF;
  height: 100%;
  .browser-operate{
    padding: 24px 24px 0 24px;
    background: #FFFFFF;
    button{
      margin-left: 8px;
      color: rgba(23,30,45,0.65);
      & > span + .anticon{
        margin-left: 6px;
      }
    }
    .ant-input-search{
      float: right;
      input::placeholder, .ant-input-search-icon svg{
        color: rgba(23,30,45,0.25);
      }
      
    }
    .ant-input-search-icon::before{
      border: none;
    }
    
  }

  .browser-card{
    width: 100%;
    height: 120px;
    display: flex;
    margin-top: 20px;
    .card-item{
      flex: 1;
      padding: 28px 0 0 104px;
      position: relative;
      background: #FFFFFF;
      margin-right: 24px;
      img{
        position: absolute;
        left: 24px;
        top: 28px;
      }
      span{
        display: block;
      }
      .card-label{
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(23,30,45,0.45);
        line-height:22px;
      }
      .render-params{
        font-size:28px;
        font-family:HelveticaNeue-Medium,HelveticaNeue;
        font-weight:500;
        color:rgba(23,30,45,1);
        line-height:44px;
      }
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .browser-table{
    width: 100%;
    margin-top: 20px;
    display: flex;
    .table-item{
      flex: 1;
      background: #FFFFFF;
      padding:24px 32px 32px 32px;
      box-sizing: border-box;
      .table-title{
        padding-left: 12px;
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(23,30,45,1);
        line-height:24px;
        position: relative;
        &:after{
          position: absolute;
          content: '';
          width: 3px;
          height: 20px;
          background: @primary-color;
          left: 0;
          top: 3px;
        }
        .more-btn{
          float: right;
          font-size:12px;
          font-weight:400;
          color:rgba(23,30,45,0.45);
          display: flex;
          align-items: center;
          cursor: pointer;
          .anticon-double-right{
            margin-left: 3px;
          }
        }
      }
      .ant-table-tbody > tr:hover{
        cursor: pointer;
      }
      
      .ant-table-wrapper{
        margin-top: 24px;
      }
    }
    .table-item:first-child{
      margin-right: 24px;
    }
  }
}

.list-page{
  padding: 20px;
  background: #fff;
  .ant-table-tbody > tr:hover{
    cursor: pointer;
  }
}

.detail-page{
  background: #EFEFEF;
  .detail-box{
    background: #FFFFFF;
    padding: 24px 32px;
    .detail-title{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(23,30,45,1);
      margin-bottom: 30px;
      padding-left: 12px;
      border-left: 6px solid @primary-color;
    }
    .detail-field{
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;
      .field-label{
        width: 85px;
        font-size:12px;
        font-family:HelveticaNeue;
        color:rgba(23,30,45,0.45);
        line-height:22px;
        margin-right: 24px;
      }
      &:last-of-type{
        .field-label{
          margin-bottom: 0;
        }
      }
      .field-params{
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        line-height: 22px;
      }
      .arg-item{
        padding: 0 10px;
        background:rgba(248,248,248,1);
        border-radius:2px;
        border:1px solid rgba(217,221,224,1);
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
  }
}